<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>计算属性</title>
    <!--引入Vue-->
    <script type="text/javascript" src="./js/vue.js"></script>
</head>

<body>
    <div id="root">
        姓:<input type="text" v-model:value="firstname"> 名:
        <input type="text" v-model:value="lastname"> 姓名:
        <!---return返回的对象是个函数时，加()返回函数的结果，不加返回函数体-->
        <!--函数的调用-->
        <!----->
        <span>{{fullname()}}</span>
    </div>
    <div id='root'>
        <input type = 'text' v-model =-

    </div>

    <script>
        const vm = new Vue({
            el: "#root",
            //用data实现
            data: {
                firstname: "邓",
                lastname: '紫琪'

            },
            //用methods实现
            methods: {
                fullname() {
                    console.log(this)
                    return this.firstname + this.lastname
                        //当vm中的_data数据发生变化时，模板页面也发生变化
                }
 //#endregion


      
            },


        });
    </script>





</body>

</html>